<!--
 @description 门店信息
 @fileName ShopItem.vue
 @author zengqiongying
 @created 2023-05-04 14:21:25
-->
<template>
  <div>
    <!-- <Cell title="门店编码" :modelValue="detail.code" defaultValue="--" readonly />
    <Cell title="门店名称" :modelValue="detail.name" defaultValue="--" readonly /> -->
    <Cell title="门店性质" :modelValue="detail.shopNatureName" defaultValue="--" readonly />
    <!-- <Cell title="国别" :modelValue="detail.countryName" defaultValue="--" readonly /> -->
    <!-- <Cell title="所在区域" :modelValue="cityName" defaultValue="--" readonly /> -->
    <Cell title="详细地址" defaultValue="--" readonly custom>
      <span>{{ detail.shopAddr }}</span>
    </Cell>
    <Cell title="门店经营状态" :modelValue="detail.manageStatusName" defaultValue="--" readonly />
    <Cell
      title="门店经营业务类型"
      :custom="businessTypeName.length > 0"
      :isColumn="businessTypeName.length > 0"
      defaultValue="--"
      readonly
      divider
    >
      <Tags v-if="businessTypeName.length > 0" :list="businessTypeName" />
    </Cell>

    <Cell title="门店经营面积(㎡)" defaultValue="--" readonly custom> {{ detail.operateArea }} m<sup>2</sup> </Cell>

    <Cell title="成品面积(㎡)" defaultValue="--" readonly custom> {{ detail.endProductArea }} m<sup>2</sup> </Cell>
    <Cell title="卫浴面积(㎡)" defaultValue="--" readonly custom> {{ detail.bathroomArea }} m<sup>2</sup> </Cell>
    <Cell title="全屋定制面积(㎡)" defaultValue="--" readonly custom> {{ detail.fullHouseArea }} m<sup>2</sup> </Cell>
    <Cell title="整体橱柜面积(㎡)" defaultValue="--" readonly custom> {{ detail.cabinetArea }} m<sup>2</sup> </Cell>
    <Cell title="样板间面积(㎡)" defaultValue="--" readonly custom> {{ detail.modelRoomArea }} m<sup>2</sup> </Cell>
    <Cell title="窗帘面积(㎡)" defaultValue="--" readonly custom> {{ detail.curtainArea }} m<sup>2</sup> </Cell>
    <Cell title="卫浴套数" :modelValue="detail.bathroomSuite" defaultValue="--" readonly />
    <Cell title="橱柜套数" :modelValue="detail.cabinetSuite" defaultValue="--" readonly />

    <Cell title="门店咨询电话" :modelValue="detail.shopInfoPhone" defaultValue="--" readonly />
    <Cell title="门店售后电话" :modelValue="detail.shopServPhone" defaultValue="--" readonly divider />

    <Cell title="城市级别" :modelValue="detail.cityLevelName" defaultValue="--" readonly />
    <Cell title="市场层级" :modelValue="detail.marketLevelName" defaultValue="--" readonly />
    <Cell title="所在楼层" :modelValue="detail.floor" defaultValue="--" readonly />
    <Cell title="店铺形态" :modelValue="detail.shopPatternName" defaultValue="--" readonly divider />

    <Cell
      title="最后一次门店建设时间"
      default-value="--"
      readonly
      :modelValue="parseTime(modelValue.laseConstructTime, '{y}年{m}月{d}日')"
    />
    <Cell title="装修时长（月）" :modelValue="modelValue.decorationTime" defaultValue="--" readonly />
    <!-- <Cell
      title="预计下次门店建设时间"
      default-value="--"
      readonly
      :modelValue="parseTime(modelValue.expectConstructTime, '{y}年{m}月{d}日')"
      divider
    /> -->

    <!-- <Cell
      title="是否超期未装修"
      default-value="--"
      readonly
      :modelValue="modelValue.isOverdueUndecoration ? '是' : '否'"
    /> -->
    <Cell title="店面装修备注" default-value="--" readonly custom divider>
      <span>{{ modelValue.overdueUndecorationReason }}</span>
    </Cell>
    <Cell title="当前是否装修中" default-value="--" readonly :modelValue="modelValue.isDecoration ? '是' : '否'" />
    <Cell title="门店建设所属阶段" default-value="--" readonly :modelValue="modelValue.belongStage" />
    <Cell title="是否KA卖场" default-value="--" readonly :modelValue="modelValue.isKaShop ? '是' : '否'" />
  </div>
</template>

<script>
  import { reactive, defineComponent, computed } from 'vue'
  import Cell from '@/components/Cell/index.vue'
  import Tags from '@/components/Tags/index.vue'
  import { parseTime } from '@/utils'
  export default defineComponent({
    name: 'DealerCustomerShopsCreateItemView',
    components: { Cell, Tags },
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, ctx) {
      const detail = computed(() => {
        return props.modelValue?.shopDetailDTO || {}
      })
      const businessTypeName = computed(() => {
        if (props.modelValue?.shopDetailDTO?.businessTypeName) {
          const name = `${props.modelValue?.shopDetailDTO?.businessTypeName}`.replaceAll('、', ',')
          return name.split(',')
        }
        return []
      })

      const cityName = computed(() => {
        const { provinceName, cityName, countyName, townName, streetName } = detail.value
        return `${provinceName || ''}${cityName || ''}${countyName || ''}${townName || ''}${streetName || ''}`
      })
      return {
        detail,
        businessTypeName,
        cityName,
        parseTime
      }
    }
  })
</script>
<style lang="less" scoped></style>
